<template>
  <div class="createPost-container">
    <PublishForm
        :title="postForm.title"
        :content="postForm.content"
        :dialog-form-visible="dialogFormVisible"
        @closeFormDialog="closeFormDialog"
        @closeChildDialog="closeChildDialog"
    />
    <!--发布按钮-->
    <div style="text-align: right">
      <el-button type="success" @click="submit">
        发布文章
      </el-button>
    </div>
    <br/>
    <el-form ref="postForm" :model="postForm" class="form-container">
      <div class="createPost-main-container">
        <el-row>
          <el-col :span="24">
            <el-form-item  prop="title">
              <strong>标题</strong><el-divider/>
              <el-input placeholder="请输入文章标题" style="width: 100%" size="large" v-model="postForm.title" maxlength="50" show-word-limit></el-input>
              <el-divider/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item style="margin-bottom: 30px;">
          <Tinymce ref="editor" :value="postForm.content" @input="getContent" :height="400" style="width: 100%" />
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
import PublishForm from "@/views/article/publish/publishForm";
import Tinymce from "@/components/Tinymce";
import {ElMessage} from "element-plus";
const defaultForm = {
  title: '', // 文章题目
  content: '', // 文章内容
}
export default {
  name: 'publish',
  components: {Tinymce, PublishForm},
  data() {
    return {
      dialogFormVisible: false,
      postForm:Object.assign({}, defaultForm),
    }
  },
  created() {
  },
  methods: {
    getContent(val){
      this.postForm.content=val
    },
    // 点击dialog中取消按钮时调用
    closeFormDialog() {
      this.dialogFormVisible = false
    },
    // 点击dialog中发布按钮时调用
    closeChildDialog() {
      this.dialogFormVisible = false
    },
    submit() {
      if (this.postForm.content.length === 0 || this.postForm.title.length === 0) {
        ElMessage({
          message: '请填写必要的标题和内容',
          type: 'warning'
        })

      } else this.dialogFormVisible = true
    }
  }
}
</script>
<style scoped>
</style>
